<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - copyNode / moveNode</TITLE>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <link href="../../../css/demo.css" rel="stylesheet" type="text/css">
    <link href="../../../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
    <script src="../../../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="../../../js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="../../../js/jquery.ztree.exedit.js" type="text/javascript"></script>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                selectedMulti: false
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeClick: beforeClick
            }
        };

        var zNodes = [
            {id: 1, pId: 0, name: "parent node 1", open: true},
            {id: 11, pId: 1, name: "leaf node 1-1"},
            {id: 12, pId: 1, name: "leaf node 1-2"},
            {id: 13, pId: 1, name: "leaf node 1-3"},
            {id: 2, pId: 0, name: "parent node 2", open: true},
            {id: 21, pId: 2, name: "leaf node 2-1"},
            {id: 22, pId: 2, name: "leaf node 2-2"},
            {id: 23, pId: 2, name: "leaf node 2-3"},
            {id: 3, pId: 0, name: "parent node 3", open: true},
            {id: 31, pId: 3, name: "leaf node 3-1"},
            {id: 32, pId: 3, name: "leaf node 3-2"},
            {id: 33, pId: 3, name: "leaf node 3-3"}
        ];

        function fontCss(treeNode) {
            var aObj = $("#" + treeNode.tId + "_a");
            aObj.removeClass("copy").removeClass("cut");
            if (treeNode === curSrcNode) {
                if (curType == "copy") {
                    aObj.addClass(curType);
                } else {
                    aObj.addClass(curType);
                }
            }
        }

        function beforeDrag(treeId, treeNodes) {
            return false;
        }

        function beforeClick(treeId, treeNode) {
            return !treeNode.isCur;
        }

        var curSrcNode, curType;

        function setCurSrcNode(treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (curSrcNode) {
                delete curSrcNode.isCur;
                var tmpNode = curSrcNode;
                curSrcNode = null;
                fontCss(tmpNode);
            }
            curSrcNode = treeNode;
            if (!treeNode) return;

            curSrcNode.isCur = true;
            zTree.cancelSelectedNode();
            fontCss(curSrcNode);
        }

        function copy(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("Please select one node at first...");
                return;
            }
            curType = "copy";
            setCurSrcNode(nodes[0]);
        }

        function cut(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("Please select one node at first...");
                return;
            }
            curType = "cut";
            setCurSrcNode(nodes[0]);
        }

        function paste(e) {
            if (!curSrcNode) {
                alert("Please select one node to copy or cut at first...");
                return;
            }
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                nodes = zTree.getSelectedNodes(),
                targetNode = nodes.length > 0 ? nodes[0] : null;
            if (curSrcNode === targetNode) {
                alert("Can't move, the same source node and destination node.");
                return;
            } else if (curType === "cut" && ((!!targetNode && curSrcNode.parentTId === targetNode.tId) || (!targetNode && !curSrcNode.parentTId))) {
                alert("Can't move, source node is the target node's child.");
                return;
            } else if (curType === "copy") {
                targetNode = zTree.copyNode(targetNode, curSrcNode, "inner");
            } else if (curType === "cut") {
                targetNode = zTree.moveNode(targetNode, curSrcNode, "inner");
                if (!targetNode) {
                    alert("Cutting failure, source node is the target node's parent.");
                }
                targetNode = curSrcNode;
            }
            setCurSrcNode();
            delete targetNode.isCur;
            zTree.selectNode(targetNode);
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#copy").bind("click", copy);
            $("#cut").bind("click", cut);
            $("#paste").bind("click", paste);
        });
        //-->
    </SCRIPT>
    <style type="text/css">
        .ztree li a.copy {
            padding-top: 0;
            background-color: #316AC5;
            color: white;
            border: 1px #316AC5 solid;
        }

        .ztree li a.cut {
            padding-top: 0;
            background-color: silver;
            color: #111;
            border: 1px #316AC5 dotted;
        }
    </style>
</HEAD>

<BODY>
<h1>Move / Copy - zTree methods</h1>
<h6>[ File Path: exedit/drag_fun.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul class="ztree" id="treeDemo"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>1, Explanation of 'copyNode / moveNode' method</h2>
                <ul class="list">
                    <li>Use 'copyNode / moveNode' method can also be achieved copy / move nodes.</li>
                    <li><p>Try to copy or cut node:<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;[ <a href="#" id="copy" onclick="return false;" title="copy">copy</a> ]
                        &nbsp;&nbsp;&nbsp;&nbsp;[ <a href="#" id="cut" onclick="return false;" title="cut">cut</a> ]
                        &nbsp;&nbsp;&nbsp;&nbsp;[ <a href="#" id="paste" onclick="return false;" title="paste">paste</a>
                        ]</p>
                    <li class="highlight_red">How to use 'zTreeObj.copyNode / moveNode' method, please see the API
                        documentation.
                    </li>
                </ul>
            </li>
            <li class="title"><h2>2, Explanation of setting</h2>
                <ul class="list">
                    <li>Same as 'Normal Drag Node Operation'</li>
                </ul>
            </li>
            <li class="title"><h2>3, Explanation of treeNode</h2>
                <ul class="list">
                    <li>Same as 'Normal Drag Node Operation'</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</BODY>
</HTML>